<div ng-init="$ctrl.init()">
  <div ng-if="$ctrl.template" class="card mb-4">
    <h6 class="card-header">
      {{$ctrl.folderType}} Template Viewer
      <!-- <a class="btn-link text-primary btn-sm float-end py-0" data-bs-toggle="collapse"
        data-bs-target="#quick-{{$ctrl.folderType}}-layout-editor" role="button" aria-expanded="false"
        aria-controls="quick-{{$ctrl.folderType}}-layout-editor">
        <span class="far fa-minus-square text-primary"></span> Show/Hide</a> -->
      <a
        href="/portal/template/details/{{$ctrl.template.themeId}}/{{$ctrl.template.folderType}}/{{$ctrl.template.id}}"
        class="btn btn-link text-primary btn-sm float-end py-0"
      >
        <span class="fas fa-pen text-primary"></span> Edit {{$ctrl.folderType}}
        Template
      </a>
    </h6>
    <div
      id="quick-{{$ctrl.folderType}}-layout-editor"
      class="card-body collapse-x"
    >
      <div class="row mb-3">
        <div class="col-4">
          <label class="form-label">Select existing template</label>
          <select
            class="form-select col-sm-4"
            ng-options="item as item.fileName for item in $ctrl.templates track by item.id"
            ng-model="$ctrl.template"
            ng-change="$ctrl.selectTemplate($ctrl.template)"
          ></select>
        </div>
        <div class="col">
          <label class="form-label">Type new name to create new template</label>
          <input
            class="form-control sel-filename"
            ng-change="$ctrl.new()"
            type="text"
            ng-disabled="$ctrl.template.id && !$ctrl.enableRename"
            ng-model="$ctrl.template.fileName"
            value="{{$ctrl.template.fileName}}"
            placeholder="Input template name here..."
          />
          <input
            class="template-id"
            type="hidden"
            ng-model="$ctrl.template.id"
            value="{{$ctrl.template.id}}"
          />
        </div>
      </div>
      <tabs-v select-callback="$ctrl.selectPane(pane)">
        <pane-v header="Razor template code">
          <monaco-editor
            content-id="$ctrl.template.id"
            line-count="$ctrl.lineCount"
            is-readonly="$ctrl.isReadonly"
            is-visible="$ctrl.activedPane.header == 'Razor Template'"
            content="$ctrl.template.content"
          >
          </monaco-editor>
        </pane-v>
        <pane-v header="Script code" ng-if="$ctrl.hideJs != 'true'">
          <monaco-editor
            content-id="$ctrl.template.id"
            line-count="$ctrl.lineCount"
            is-readonly="$ctrl.isReadonly"
            is-visible="$ctrl.activedPane.header == 'Scripts'"
            content="$ctrl.template.scripts"
            default-content="'<script>\n\n</script>'"
          ></monaco-editor>
        </pane-v>
        <pane-v header="Style code" ng-if="!$ctrl.hideCss != 'true'">
          <monaco-editor
            content-id="$ctrl.template.id"
            line-count="$ctrl.lineCount"
            is-readonly="$ctrl.isReadonly"
            is-visible="$ctrl.activedPane.header == 'Styles'"
            content="$ctrl.template.styles"
            default-content="'<style>\n\n</style>'"
          >
          </monaco-editor>
        </pane-v>
      </tabs-v>
    </div>
  </div>
</div>
